<template>
	<view class="container" v-if="goods!=null">
		<!-- 轮播图 -->
		<view class="swiperbox">
			<swiper class="swiper" autoplay="true">
				<swiper-item class="swiper-item">
					<image :src="goods.goodsImg" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- <view class="num">1/2</view> -->
		</view>
		<!-- 秒杀价格栏 -->
		<view class="price-box">
			<view class="left">
				<view class="price">
					<view class="tariff">￥{{goods.seckillPrice}}</view>
					<view class="number">仅剩{{goods.surplusNum-goods.robbedNum}}件</view>
				</view>
				<view class="total">累计已拼10万+件</view>
			</view>
			<view class="right">
				<view class="seckill">限时秒杀</view>
				<view class="time">{{h<10?'0'+h:h}}:{{m<10?'0'+m:m}}:{{s<10?'0'+s:s}}</view>
			</view>
		</view>
		<!-- 商品标题 -->
		<view class="title">
			<view class="text">{{goods.goodsName}}</view>
			<!-- <view class="delivery">
				<text>不配送地区</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view> -->
		</view>
		<!-- 邀请好友拼单 -->
		<view class="invitation">
			<view class="invite" v-if="num>0">邀请{{num}}位新用户即可购买</view>
			<view class="invite" v-if="num==0">您已具备秒杀该商品的资格</view>
			<view class="condition">
				<view class="three">
					<image :src="item.avatarUrl" mode="aspectFill" v-for="item in userlist" class="item"></image>
				</view>
				<!-- <view class="surplus">
					<view>还差3人拼成</view>
					<view>剩余23:54:49.20</view>
				</view> -->
				<view class="goorder" @click="appShare">邀请好友注册</view>
			</view>
		</view>
		<!-- 商品介绍 -->
		<view class="introduce">
			<view class="liner"></view>
			<view class="product-introduction">商品介绍</view>
			<view >
				<u-parse :html="goods.goodsDetails"></u-parse>
			</view>
		</view>
		<!-- 立即购买 -->
		<view class="gobuy">
			<view class="buy" @click="buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import{msproduct}from"../../api/product.js"
	export default{
		data(){
			return{
				id:null,
				goods:null,
				userlist:[],
				h: 0,
				m: 0,
				s: 0,
				interval: null,
				time:null,
				flag:true,
				num:null
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getinfo()
		},
		methods:{
			// 分享
			share(){
				// #ifdef H5
				// window.location.href="hbuilder://name=XiaoMing&password=123456"
				// #endif
				
			},
			appShare() {
				let code = uni.getStorageSync("user").recommendCode
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://192.168.2.5:8082/#/?code="+code,
					title: "社区在线的分享",
					summary:"我正在使用社区在线APP，快来加入吧",
					imageUrl:this.goods.goodsImg,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			buy(){
				if(this.flag==false){
					this.msg('秒杀已结束',"none")
					return
				}
				if(this.num>0){
					this.msg("邀请"+this.num+"位新用户即可购买","none")
					return
				}
				uni.navigateTo({
					url:"/pages/order/porder?isms=true&msid="+this.goods.seckillId
				})
			},
			async getinfo(){
				uni.showLoading({
					title:"加载中..."
				})
				let res=await this.get(msproduct,{seckillId:this.id})
				let userlist=uni.getStorageSync('user').userList
				this.goods=res.data
				let num=this.goods.invitationLimit
				if(userlist.length>=num){
					this.num=0
					for(let i=0;i<num;i++){
						this.userlist.push(userlist[i])
					}
				}else{
					// avatarUrl
					this.num=num-userlist.length
					this.userlist=userlist
					for(let i=0;i<this.num;i++){
						let obj={}
						obj.avatarUrl="../../static/bg/user.png"
						this.userlist.push(obj)
					}
				}
				
				let endTime=Date.parse(this.goods.endTime)
				let time=Date.parse(new Date())
				if(time>endTime){
					this.msg('秒杀已结束',"none")
					this.flag=false
				}
				this.time=(endTime-time)/1000
				console.log(this.time)
				this.initInterval()
				console.log(endTime)
				console.log(time)
			},
			// 倒计时
			initInterval() {
				let time = this.time
				if (time > 0) {
					this.interval = setInterval(() => {
						if (time == 0) {
							clearInterval(this.initInterval)
							this.flag=false
							this.h = 0
							this.m = 0
							this.s = 0
						} else {
							this.h = parseInt((time / 3600) % 24);
							this.m = parseInt((time / 60) % 60);
							this.s = parseInt(time % 60);
							time--
						}
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="less">
	page{
		background: #F0F0F0;
	}
	.container{
		padding-bottom: 100rpx;
	}
	.swiperbox {
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}
	.num {
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #FFFFFF;
		padding: 4rpx 10rpx;
		border-radius: 30rpx;
		line-height: 24rpx;
		font-size: 24rpx;
	}
	.swiper-item{
		width: 750rpx;
		height: 750rpx;
		image{
			width: 750rpx;
			height: 750rpx;
		}
	}
	.swiper{
		width: 750rpx;
		height: 750rpx;
	}
	.price-box{
		display: flex;
		align-items: center;
		width: 690rpx;
		margin: 30rpx 0 0 30rpx;
	}
	.left{
		width: 540rpx;
		height: 122rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 12rpx 0rpx 0rpx 0rpx;
		.price{
			margin-top: 10rpx;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			.tariff{
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: bold;
			}
			.number{
				// width: 150rpx !important;
				height: 30rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				margin-left: 10rpx;
				text-align: center;
				line-height: 30rpx;
				font-size: 24rpx;
				color: #F09238;
				padding: 0 20rpx;
			}
		}
	}
	.right{
		width: 150rpx;
		height: 122rpx;
		background: #DE3A2E;
		border-radius: 0rpx 12rpx 0rpx 0rpx;
	}
	.total{
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}
	.seckill{
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-left: 25rpx;
	}
	.time{
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 25rpx;
		margin-top: 10rpx;
	}
	.title{
		width: 690rpx;
		// height: 178rpx;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		margin-left: 30rpx;
		background-color: #ffffff;
		padding: 10rpx 20rpx 20rpx;
	}
	.text{
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		overflow: hidden;  
		text-overflow: ellipsis;  
		display: -webkit-box;  
		-webkit-line-clamp: 2;  
		-webkit-box-orient: vertical; 
	}
	.delivery{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #757575;
		margin-top: 20rpx;
	}
	.invitation{
		width: 690rpx;
		height: 162rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 20rpx 30rpx;
		padding: 20rpx 30rpx;
	}
	.invite{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.condition{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		justify-content: space-between;
		.three{
			display: flex;
			align-items: center;
			.item{
				width: 60rpx;
				height: 60rpx;
				border: 1px solid #F09238;
				border-radius: 50%;
				color: #F09238;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right: 10rpx;
			}
		}
	}
	.surplus{
		width: 180rpx;
		margin-left: 100rpx;
		text-align: right;
		font-size: 24rpx;
	}
	.goorder{
		// width: 120rpx;
		height: 50rpx;
		background: #F09238;
		border-radius: 8rpx;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
		font-size: 26rpx;
		padding: 0 20rpx;
	}
	.introduce{
		width: 690rpx;
		height: 90rpx;
		border-radius: 12rpx 12rpx 0 0;
		background-color: #FFFFFF;
		margin-left: 30rpx;
		position: relative;
		
	}
	.liner{
		border-bottom: 1px solid #999999;
		width: 288rpx;
		position: absolute;
		left: 200rpx;
		top: 45rpx;
	}
	.product-introduction{
		width: 148rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		text-align: center;
		color: #666666;
		position: absolute;
		left: 280rpx;
		top: 22rpx;
		background-color: #FFFFFF;
		z-index: 2;
	}
	.gobuy{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 92rpx;
		background: #FFFFFF;
		z-index: 3;
		display: flex;
		align-items: center;
	}
	.buy{
		width: 220rpx;
		height: 60rpx;
		background: #F09238;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		right: 30rpx;
		
	}
</style>
